import React from "react";
import { Avatar, Tooltip, Space } from "antd";

export default function AvatarOptions(props) {
  const { value } = props;
  //附件字段解析
  let Avatars = [];
  try {
    Avatars = value ? JSON.parse(value) : [];
  } catch (error) {
    console.error("无效的JSON数据:", error);
    return <div>成员组件解析异常.</div>;
  }
  return (
    <div>
      <Avatar.Group
        size="small"
        max={{
          count: 2,
          style: {
            color: "#f56a00",
            backgroundColor: "#fde3cf",
          },
        }}
      >
        {Avatars.map((avatar) => (
          <Space
            key={avatar.accountId}
            size={4}
            style={{ gap: "4px", marginRight: "8px" }}
          >
            <Avatar src={avatar.avatar} />
            <span>{avatar.fullname}</span>
          </Space>
        ))}
      </Avatar.Group>
    </div>
  );
}
